<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>12/24 시계</title>
<style>
table.clock {
  text-align: center;
  border: none;
  padding: 5px;
  margin: auto;
}
input.clock2 {
  text-align: center;
  border: none;
  font: bold .9em verdana, helvetica, arial, sans-serif;
  padding-bottom: .5em;
}
.clock3 {
  text-align: center;
  font: arial;
}
</style>
<script>
function formatTime() {
  now = new Date();
  hour = now.getHours();
  min = now.getMinutes();
  sec = now.getSeconds();
  if (document.clock.sivamtime[0].checked) {
    if (min <= 9) {
      min = "0" + min;
    }
    if (sec <= 9) {
      sec = "0" + sec;
    }
    if (hour > 12) {
      hour = hour - 12;
      add = "오후 ";
    } else {
      hour = hour;
      add = "오전 ";
    }
    if (hour == 12) {
      add = "오후 ";
    }
    if (hour == 00) {
      hour = "12";
    }
    document.clock.sivam.value = add + ((hour<=9) ? "0" + hour : hour) + ":" + min + ":" + sec;
  }
  if (document.clock.sivamtime[1].checked) {
    if (min <= 9) {
      min = "0" + min; }
    if (sec <= 9) {
      sec = "0" + sec; }
    if (hour < 10) {
      hour = "0" + hour; }
    document.clock.sivam.value = hour + ':' + min + ':' + sec;
  }
  setTimeout("formatTime()", 1000);
}
window.onload=formatTime;
</script>
</head>
<body>
<form name="clock">
	<table class="clock" width="135">
		<tr>
			<td><input class="clock2" type="text" name="sivam" size="12"></td>
		</tr>
		<tr>
			<td><label class="clock3" for="1">
				<input type="radio" id="1" name="sivamtime" checked>12시간 표시</label></td>
		</tr>
		<tr>
			<td><label class="clock3" for="2">
				<input type="radio" id="2" name="sivamtime">24시간 표시</label></td>
		</tr>
	</table>
</form>
